import React, { useState } from 'react';
import styles from './index.module'
import { Form, Input } from 'antd-mobile'
import searchIcon from '@/assets/icons/search.svg';
const Search = ({keyWords, setKeyWords}) => {
  const [searchValue, setSearchValue] = useState('')
  /**
   * 设置搜索内容
   */
  const setKeyword = (keyword) => {
    if (keyword) {
      setSearchValue(keyword)
      // this.setState({
      //   suggestList: [],
      //   searchValue: keyword,
      //   keyword,
      // });
      // // 记录当前搜索历史
      // storage.setSearchHistory({
      //   value: keyword,
      //   timestamp: new Date().getTime()
      // });
    }
  }
  /**
   * 清楚搜索内容
   */
  const clearSearch = () => {
    setSearchValue('')
    setKeyWords('')
    // this.setState({
    //   suggestList: [],
    //   searchValue: "",
    //   keyword: "",
    //   searchHistories: storage.getSearchHistory()
    // });
  }
  const getSuggests = (e) => {
    console.log(`----->getSuggests`, e)
    console.log(`----->getSuggests`, e.keyCode)
    if (e.keyCode !== 13) {
      const content = e.currentTarget.value;
      if (content) {
        setKeyword(content)
        setKeyWords(content)
        // getSuggests(content).then((result) => {
        //   if (result.code === "1") {
        //     let suggestList = [];
        //     if (result.data.tag) {
        //       suggestList = result.data.tag.map((item) => ({name: item.name, value: item.value}))
        //     }
        //     this.setState({
        //       suggestList,
        //       keyword: ""
        //     });
        //   }
        // });
      } else {
        setSearchValue('')
        setKeyWords('')
        // this.setState({
        //   suggestList: [],
        //   keyword: ""
        // });
      }
    }
  }
  /**
   * 设置搜索内容
   */
  const setSearchContent = (e) => {
    if (e.keyCode === 13) {
      const content = e.currentTarget.value;
      if (content) {
        setKeyword(content)
        // this.setState({
        //   suggestList: [],
        //   keyword: content
        // });
        // // 记录当前搜索历史
        // storage.setSearchHistory({
        //   value: content,
        //   timestamp: new Date().getTime()
        // });
      }
    }
  }
  return (
    <div className={styles.searchTop}>
      <div className={styles.boxWrapper}>
        {/* <i className={styles.iconSearch} /> */}
        <img src={searchIcon} alt="" className={styles.iconSearch} />
        <input
          type="search"
          autoComplete="off"
          maxLength={33}
          placeholder="请输入搜索关键词"
          value={searchValue}
          className={styles.searchBox}
          onChange={(e) => { setSearchValue(e.currentTarget.value) }}
          onKeyDown={(e) => setSearchContent(e)}
          onKeyUp={(e) => getSuggests(e)}
        />
        {
          keyWords ? (
            <i className={styles.searchClose} onClick={() => clearSearch()} />
          ) : null
        }
      </div>
      <span className={styles.cancel} onClick={() => { window.history.back(); }}>取消</span>
    </div>
  )
}
export default Search